<template>
  <div id="contentBox">
    <el-button
      type="primary"
      size="mini"
      @click="$router.push('/marketing/practicalStrategy/addstrategy')"
    >新建攻略</el-button>
    <el-table
      :data="listData"
      style="width: 100%;margin-top:10px"
      border
      fit
      :header-cell-style="{background:g.mainColor}"
    >
      <el-table-column prop="date" label="封面" align="center" min-width="120px">
        <template>
          <span>
            <img
              src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3372371941,4012056760&fm=26&gp=0.jpg"
              class="table-row-img"
            >
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题" align="center">
        <template />
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
        <template slot-scope="{row}">
          <span>{{ row.status===1?'已发布':'未发布' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="发布时间" align="center">
        <template lot-scope="{row}" />
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="120px">
        <template slot-scope="{row,$index}">
          <el-button type="primary" size="mini" @click="handleOff(row,$index)">{{ row.status===1?'下架':'上架' }}</el-button>
          <el-button type="primary" size="mini" @click="handleEdit">编辑</el-button>
          <el-button type="danger" size="mini" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.currentPage"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
export default {
  name: 'StrategyList',
  components: { Pagination },
  data() {
    return {
      listData: [
        {
          date: '2016-05-02',
          title: '分销裂变玩法指引',
          name: '分销海报',
          address: '上海市普陀区金沙江路 1518 弄',
          status: 1
        },
        {
          date: '2016-05-04',
          title: '分销裂变玩法指引',
          name: '分销海报',
          address: '上海市普陀区金沙江路 1517 弄',
          status: 2
        },
        {
          date: '2016-05-01',
          title: '分销裂变玩法指引',
          name: '分销海报',
          address: '上海市普陀区金沙江路 1519 弄',
          status: 1
        },
        {
          date: '2016-05-03',
          title: '分销裂变玩法指引',
          name: '分销海报',
          address: '上海市普陀区金沙江路 1516 弄',
          status: 2
        }
      ],
      listQuery: {
        currentPage: 1,
        pageSize: 10
      },
      total: 9
    }
  },
  methods: {
    //   下架
    handleOff(row, $index) {
      this.$confirm(`是否要${row.status === 1 ? '下架' : '上架'}该攻略, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '下架成功!'
          })
        })
        .catch(() => {})
    },
    // 编辑
    handleEdit() {
      this.$router.push({
        path: '/marketing/practicalStrategy/addstrategy',
        query: {
          id: 12
        }
      })
    },
    // 删除
    handleDelete(row) {
      this.$confirm('是否要删除该攻略, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {})
    },
    // 分页切换
    getList() {}
  }
}
</script>

<style lang='scss' scoped>
#contentBox {
  padding: 10px 20px;
}
</style>
